<template>

<div class="status-label" @click='up' :class='"status-label-" + size'>

    <i class="status-icon" :style='statusStyle'></i>
    
    <h4 class="label">
        {{val.label}}
    </h4>
</div>

</template>

<script lang='ts'>

// 状态标签
import {Component, Vue, Prop} from 'vue-property-decorator'

@Component({})
export default class status extends Vue{
    name:string = 'statusLabel'

    get statusStyle(){
        return this.val.color ? {'border-color': this.val.color} : '';
    }

    @Prop()
    val:stateConf

    @Prop({default: 'default'})
    size:commonInf.componentSize
    

    // 点击提交状态值
    up(){
        this.$emit('state', this.val.key)
    }

}
</script>

<style scoped lang='scss'>

.status-label{
    display: flex;
    justify-content: left;
    align-items: center;

    cursor: default;
}

.label{
    flex: 1 1;
    font-weight: 400;
}

.status-icon{
    $size: _rem(14.2px);
    flex: 0 $size;
    display: block;
    margin-right: _rem(4px);
    width: $size;
    height: $size;
    border-radius: 100%;
    border: _rem(2.4px) solid $main_color;
}


// 尺寸
.status-label-small{

    .label{
        font-size: _rem(12px);
    }
    
    .status-icon{
        $size: _rem(12px);
        display: block;
        flex: 0 $size;
        width: $size;
        height: $size;
    }
    
}

</style>